<template>
  <div class="app-container">
    <div class="topMenu">
      <div class="leftFunction">
        <div>
          <el-button :class="{hightlight:plainDay}" @click="DbviewByDay($event)">按日查看</el-button>
          <el-button :class="{hightlight:plainWeek}" @click="HandleViewByWeek">按周查看</el-button>
        </div>
      </div>
      <div class="currentDate">
        {{ currentDate }}
      </div>
    </div>
    <div class="displayArea">
      <div style="margin-top: 20px">
        <transition name="el-fade-in-linear">
          <div v-show="viewByday" class="viewbydayArea">
            <ViewByDay
              @handleRearrangeByDay="handleRearrangeByDay"
              ref="viewByDay"
            />
          </div>
        </transition>
        <transition name="el-fade-in-linear">
        <div v-show="viewByweek" class="viewbyweekArea">
          <ViewByWeek
            @handleRearrangeByWeek="handleRearrangeByWeek"
            ref="viewByWeek"
          />
        </div>
      </transition>
      </div>
    </div>
  </div>
</template>

<script>
import ViewByDay from "./component/viewByDay";
import ViewByWeek from "./component/viewByWeek";
import { debounce } from '@/utils/MyTools';
let that = null;
export default {
  components: {
    ViewByDay,
    ViewByWeek,
  },
  data() {
    return {
      viewByday: true,
      viewByweek: false,
      value: new Date(),
      plainDay:true,
      plainWeek:false

    };
  },
  computed: {
    currentDate() {
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = parseInt(currentDate.getMonth()) + 1;
      const date = currentDate.getDate();
      const week = this.getMonthWeek(year, month, date);
      const RealDate =
        year + " 年 " + month + " 月 " + date + " 日 " + " 第 " + week + " 周 ";
      return RealDate;
    },
  },
  created() {
    that=this
  },
  methods: {
    // 获取当日为本月第几周
    getMonthWeek(a, b, c) {
      /**
       * a = d = 当前日期
       * b = 6 - w = 当前周的还有几天过完(不算今天)
       * a + b 的和在除以7 就是当天是当前月份的第几周
       */
      var date = new Date(a, parseInt(b) - 1, c);
      var w = date.getDay();
      var d = date.getDate();
      if (w == 0) {
        w = 7;
      }
      const getWeek = Math.ceil((d + 6 - w) / 7);
      return getWeek;
    },
    // 切换查询模式
    HandleViewByDay() {
      this.viewByweek = false;
      this.plainWeek = false;
      setTimeout(() => {
        this.viewByday = true;
        this.plainDay = true;
      }, 1000);
    },
    DbviewByDay:debounce(()=>{
      that.HandleViewByDay();
    },0),
    HandleViewByWeek() {
      this.viewByday = false;
      this.plainDay = false;
      setTimeout(() => {
        this.plainWeek = true;
        this.viewByweek = true;
      }, 1000);
    },
    // 以指定时间计算每周的周一日期
    getEveryMonday(realdate) {
      function getNextDate(date, day) {
        var dd = new Date(date);
        dd.setDate(dd.getDate() + day);
        var y = dd.getFullYear();
        var m =
          dd.getMonth() + 1 < 10
            ? "0" + (dd.getMonth() + 1)
            : dd.getMonth() + 1;
        var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
        return y + "-" + m + "-" + d;
      }
      const differentDays =
        realdate.getDay() - 1 == -1 ? 6 : realdate.getDay() - 1;
      // console.log("相差的",differentDays);
      const targetDate = getNextDate(realdate, -differentDays);
      // console.log("周一日期",targetDate);
      return targetDate;
    },

    //处理按日排班重排/排班问题
    handleRearrangeByDay(val) {
      //因为按日排班的原因,按周查看的数据也会改变，所以要调用查看按日排班的方法
      this.$refs.viewByWeek.getThisWeekList(val);
    },
    handleRearrangeByWeek(val) {
      //因为按日排班的原因,按周查看的数据也会改变，所以要调用按日排班的方法
      //默认按日查看重新获取当日的排班表
      this.$refs.viewByDay.getDayList(val.date);
    },
  },
};
</script>

<style lang="less" scoped>
// body {
//   height: 100%;
// }
// ::-webkit-scrollbar {
//   overflow: hidden hidden;
// }
.app-container {
  height: 90%;
  width: 100%;
  // border:1px solid black
}
.hightlight{
  color: rgb(62, 145, 247);
  background-color: rgb(234, 244, 254);
  border: 1px solid rgb(62, 145, 247)
}
.topMenu {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.leftFunction {
  display: flex;
}
.viewbydayArea {
  width: 100%;
  height: 100%;
  // border:1px solid black
}
.viewbyweekArea {
  width: 100%;
  height: auto;
}
.displayArea {
  height: 85vh;
  // overflow: scroll;
  // border: 1px solid black;
}
</style>
